<template>
  <div class="yin">
    <div class="kaola" v-show="kaola">
      <img
        class="kaola-img"
        src="https://kaola-haitao.oss.kaolacdn.com/a02afcdf-2e40-4c26-821b-82e4f0eeb411T2008202136_180_180.png?x-oss-process=image/resize,m_fill,w_100,h_100/quality,q_85"
        alt
      />
      <div class="dkkaola">打开考拉</div>
    </div>
    <div class="fhdb" v-show="fhdb" @click="toTop">
      <div class="fhdb-a">
        <van-icon class="shang" name="arrow-up" />
        <p>顶部</p>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";
Vue.use(Icon);

export default {
  data() {
    return {
      kaola: false,
      fhdb: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
        let scrolltop = document.documentElement.scrolltop || document.body.scrollTop;
        scrolltop > -10? (this.fhdb = true) : (this.fhdb = false);
        scrolltop > -10? (this.kaola = true) : (this.kaola = false);
        // console.log(scrolltop);
    },
    toTop() {
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        //实现滚动效果
        const timeTop = setInterval(() => {
            document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
            if (top <= 0) {
            clearInterval(timeTop);
            }
        });
    },
  },
};
</script>

<style  lang="scss" scoped>
.kaola {
  position: fixed;
  right: 5px;
  top: 420px;
  margin-right: 15px;
}
.kaola-img {
  height: 60px;
  box-shadow: 0 0 0.08rem 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
}
.dkkaola {
  width: 55px;
  height: 20px;
  background-image: linear-gradient(90deg, #f00 0%, #ff3164 100%);
  color: white;
  border-radius: 8px;
  font-size: 12px;
  margin: 0 auto;
  padding-left: 6px;
}
.fhdb {
  position: fixed;
  top: 600px;
  right: 20px;
}
.fhdb-a {
  width: 40px;
  height: 40px;
  color: #fff;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.4);
  p {
    position: absolute;
    top: 18px;
    left: 0;
    width: 100%;
    line-height: 12px;
    font-size: 12px;
    text-align: center;
  }
  .shang {
    position: absolute;
    left: 10px;
    top: 5px;
    line-height: 12px;
    font-size: 20px;
  }
}
</style>
